<template>
  <header
    id="gtco-header"
    class="gtco-cover"
    role="banner"
    style="background-image: url(http://job-saas.oss-cn-hangzhou.aliyuncs.com//2019/08/02/156473223745112.jpg)"
  >
    <div class="overlay"></div>
    <div class="gtco-container">
      <div class="row">
        <div class="col-md-12 col-md-offset-0 text-left">
          <div class="row row-mt-15em">
            <div class="col-md-7 mt-text animate-box" data-animate-effect="fadeInUp">
              <span class="intro-text-small">Welcome to banchengyun</span>
              <h1>欢迎登录半城直聘</h1>
            </div>
            <div class="col-md-4 col-md-push-1 animate-box" data-animate-effect="fadeInRight">
              <div class="form-wrap">
                <div class="tab">
                  <ul class="tab-menu">
                    <!-- <li class="active gtco-first"><a href="#" data-tab="signup">Sign up</a></li> -->
                    <li class="gtco-second">
                      <a href="#" data-tab="login">登录半城直聘</a>
                    </li>
                  </ul>
                  <div class="tab-content">
                    <div class="tab-content-inner active" data-content="signup">
                      <form action="#">
                        <div class="row form-group">
                          <div class="col-md-12">
                            <label for="username">请输入手机号</label>
                            <input type="text" class="form-control" id="phone" @input="listenInput" />
                          </div>
                        </div>
                        <div class="row form-group">
                          <div class="col-md-12">
                            <label for="password">请输入验证码</label>
                            <div class="yanzhengma">
                              <input
                                type="password"
                                class="form-control"
                                id="code"
                                @input="listenInput"
                              />
                              <!-- <input class="btn btn-primary" type="submit" value='获取验证码' /> -->
                              <div
                                v-if="codeState==0"
                                class="btn btn-primary"
                                @click="getCode"
                              >获取验证码</div>
                              <div v-if="codeState==1" class="btn-cannot">重新发送{{countNumber}}s</div>
                              <div v-if="codeState==2" class="btn btn-primary" @click="getCode">重新获取</div>
                            </div>
                          </div>
                        </div>

                        <div class="row form-group">
                          <div class="col-md-12">
                            <input class="btn btn-primary" @click="loginIn" value="登录" />
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { VerifyPhone, PhoneLogin } from "~/api/worker/user";
import config from "~/config";
import personFn from "~/common/js/person";
export default {
  name: "loginIndex",
  data() {
    return {
      phone: "",
      code: "",
      codeState: 0, //0首次获取,1验证码接受中,2重新获取
      countNumber: 90
    };
  },
  components: {},
  beforeCreate() {},
  created() {
    this.$store.dispatch("changeTabName", "loginIndex");
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    loginIn() {
      let phone = this.phone;
      let code = this.code;
      if (!phone) {
        this.$message.warning("请填写手机号");
        return;
      }
      if (!code) {
        this.$message.warning("请输入验证码");
        return;
      }
      PhoneLogin({ phone, code })
        .then(result => {
          let { authorization, phone, user_saas_id } = result;
          localStorage.setItem("Authorization", authorization);
          localStorage.setItem("phone", phone);
          localStorage.setItem("user_saas_id", user_saas_id);
          this.$message.success("登录成功");
          //重新获取平台配置
          personFn();
          setTimeout(() => {
            this.$router.push({ name: "recuitIndex" });
          }, 2000);
        })
        .catch(err => {
          this.$message.error("验证码有误");
        });
    },
    listenInput(e) {
      let { id, value } = e.currentTarget;
      if (id == "code" && value == "000000") {
        this[id] = config.code;
        return;
      }
      this[id] = value;
    },
    getCode() {
      if (this.phone) {
        VerifyPhone({ phone: this.phone })
          .then(result => {
            this.codeState = 1;
            this.$message.success("验证码已发送,请注意查收");
            let interval = setInterval(() => {
              if (this.countNumber > 0) {
                this.countNumber = --this.countNumber;
              } else {
                this.codeState = 2;
                clearInterval(interval);
                return;
              }
            }, 1000);
          })
          .catch(err => {
            this.$message.warning(JSON.stringify(err));
          });
      } else {
        this.$message.error("请填写手机号码");
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/login.less";
.yanzhengma {
  width: 100%;
  display: flex;
  .form-control {
    width: 55%;
  }
  .btn-primary {
    padding: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-left: 10px;
    width: 45%;
  }
  .btn-cannot {
    padding: 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    margin-left: 10px;
    width: 45%;
    background: #999;
  }
  .btn-cannot:hover {
    border: none;
  }
}
</style>
